---
title: Using in Browser
description: How to use Jimp in the browser.
---

import { GrayscaleExample } from "../../../components/grayscale-example";
import GrayscaleExampleCode from "../../../components/grayscale-example?raw";
import { Code } from "@astrojs/starlight/components";

Jimp can be used anywhere that javascript is supported. It can be used in the browser, in Node.js, or in a web worker.

Jimp comes with a pre-bundled browser version.
To use it simply import `jimp` instead.


<br />
<GrayscaleExample client:load />

<details>
  <summary>How to use in the browser</summary>

<Code code={GrayscaleExampleCode} lang="ts" title="example.jsx" />

</details>

## Usage

There are a few main ways to use Jimp in the browser.

### With hosted file

You can initialize a Jimp instance from a URL or a file path.

```ts
import { Jimp } from "jimp";

// Read a file hosted on the same domain
const image1 = await Jimp.read("/some/url");

// Read a file hosted on a different domain
const image2 = await Jimp.read("https://some.other.domain/some/url");
```

### With uploaded files

Or you can use Jimp with an `ArrayBuffer`.
Here we take a user's uploaded image and modify it to greyscale.

```ts
function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
  const reader = new FileReader();

  reader.onload = async (e) => {
    const image = await Jimp.fromBuffer(e.target?.result);

    image.greyscale();

    const base64 = await image.getBase64("image/jpeg");
  };

  reader.readAsArrayBuffer(e.target.files[0]);
}

input.addEventListener("change", handleFile);
```

### Using Canvas

You can also use Jimp with a canvas.

```ts
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

// Load the canvas into a Jimp instance
const image = await Jimp.fromBitmap(
  ctx.getImageData(0, 0, canvas.width, canvas.height)
);

// Manipulate the image
image.greyscale();

const imageData = new ImageData(
  new Uint8ClampedArray(image.bitmap.data),
  image.bitmap.width,
  image.bitmap.height
);

// Write back to the canvas
ctx.putImageData(imageData, 0, 0);
```

## Using Fonts

Jimp supports loading fonts from a URL or a file path.
You must host the fonts and will not be able to use the ones included in the node version of Jimp.

> PRs welcome! 

## Web Workers

Jimp can be slow and you don't want that running on the main thread.
Workers can make this experience a lot better.

First define a worker.
This is where you should import jimp and do your image transformations.

```ts
import { Jimp, loadFont } from "jimp";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ctx: Worker = self as any;

ctx.addEventListener("message", async (e) => {
  // Initialize Jimp
  const image = await Jimp.fromBuffer(e.data.image);
  const options = e.data.options;

  // Manipulate the image
  if (options.blur) {
    image.blur(options.blur);
  }

  // Return the result
  ctx.postMessage({ base64: await image.getBase64("image/png") });
});
```

Then you can use the worker.

```ts
const fileData: ArrayBuffer = new ArrayBuffer(); // Your image data
const worker = new Worker(new URL("./jimp.worker.ts", import.meta.url), {
  type: "module",
});

worker.postMessage({
  image: fileData,
  options: {
    blur: 8
  },
});

worker.addEventListener("message", (e) => {
  setOutput(e.data.base64);
  setIsLoading(false);
});
```